<template>
  <div class="gContainer">
    <!-- <d3graph /> -->
    <MyMenu @event="handler"/>
    <div v-if="condition=='A'">
      <gSearch @getData="update" @getAnswer="updatea" @getInput="updatei" />
      <d3graph
        :data="data"
        :answer="answer"
        :names="names"
        :input="input"
        :labels="labels"
        :linkTypes="linkTypes"
      />
    </div>
  <div v-if="condition=='B'">
    <knowManage/>
  </div>
  </div>
</template>

<script>
import gSearch from "@/components/gSearch.vue";
import d3graph from "@/components/d3graph.vue";
import MyMenu from "@/components/menu.vue";
import knowManage from "@/components/knowManage.vue"
export default {
  components: {
    gSearch,
    d3graph,
    MyMenu,
    knowManage
  },
  data () {
    return {
      // d3jsonParser()处理 json 后返回的结果
      data: {
        nodes: [],
        links: []
      },
      input: "",
      answer: "",
      names: [
        "疾病",
        "食物",
        "药品",
        "人群",
        "诊室",
        "运动频率",
        "运动强度",
        "运动时间",
        "运动类型"
      ],
      labels: [
        "disease",
        "food",
        "drag",
        "crowd",
        "medical_department",
        "sport_freq",
        "sport_iten",
        "sport_time",
        "sport_type"
      ],
      linkTypes: ["", "不宜食材", "适宜食材"],
      condition: "A"
    };
  },
  methods: {
    handler (data) {
      console.log(data)
      this.condition = data
      // return data
    },
    // 视图更新
    update (json) {
      console.log(typeof json);
      console.log("update");
      console.log(json);
      this.d3jsonParser(json);
    },
    updatea (json) {
      console.log(json);
      this.answer = json;
    },
    updatei (json) {
      console.log(json);
      this.input = json;
    },
    /*eslint-disable*/
    // 解析json数据，主要负责数据的去重、标准化
    d3jsonParser(json) {
      const nodes = [];
      const links = []; // 存放节点和关系
      const nodeSet = []; // 存放去重后nodes的id

      // 使用vue直接通过require获取本地json，不再需要使用d3.json获取数据
      // d3.json('./../data/records.json', function (error, data) {
      //   if (error) throw error
      //   graph = data
      //   console.log(graph[0].p)
      // })

      for (let item of json) {
        item = JSON.parse(
          JSON.stringify(item)
            .replace(/\n/g, "\\n")
            .replace(/\r/g, "\\r")
        );
        // item = JSON.parse(item.replace(/\n/g,"\\n").replace(/\r/g,"\\r"));
        if (Object.keys(item.p.segments[0]).length === 0) {
          nodes.push({
            id: item.p.start.identity,
            label: item.p.start.labels[0],
            properties: item.p.start.properties,
          });
          this.data = { nodes, links };
          return;
        }
        for (let segment of item.p.segments) {
          // 重新更改data格式
          if (nodeSet.indexOf(segment.start.identity) == -1) {
            nodeSet.push(segment.start.identity);
            nodes.push({
              id: segment.start.identity,
              label: segment.start.labels[0],
              properties: segment.start.properties,
            });
          }
          if (nodeSet.indexOf(segment.end.identity) == -1) {
            nodeSet.push(segment.end.identity);
            nodes.push({
              id: segment.end.identity,
              label: segment.end.labels[0],
              properties: segment.end.properties,
            });
          }
          links.push({
            source: segment.relationship.start,
            target: segment.relationship.end,
            type: segment.relationship.type,
            properties: segment.relationship.properties,
          });
        }
      }
      console.log(nodes);
      console.log(links);
      // this.links = links
      // this.nodes = nodes
      this.data = { nodes, links };
      // console.log(this.answer)
      // return { nodes, links }
    },
  },
};
</script>

<style lang="scss" scoped>
.gContainer {
  /* margin-top: 20px; */
  position: relative;
  width: 100%;
  /* border: 2px #000 solid; */
  /* background-color: #9dadc1; */
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>
